const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const connect = require("gulp-connect");
const sourcemaps = require("gulp-sourcemaps");
gulp.task("server", (done) => {
  connect.server({
    root: "dist",
    livereload: true,
  });
  done();
});
gulp.task("html", (done) => {
  gulp.src("html/**").pipe(gulp.dest("dist")).pipe(connect.reload());
  done();
});
gulp.task("libs", (done) => {
  gulp.src("libs/**").pipe(gulp.dest("dist/libs")).pipe(connect.reload());
  done();
});
gulp.task("js", (done) => {
  gulp.src("js/**").pipe(gulp.dest("dist/js")).pipe(connect.reload());
  done();
});
gulp.task("img", (done) => {
  gulp.src("img/**").pipe(gulp.dest("dist/img")).pipe(connect.reload());
  done();
});
gulp.task("fonts", (done) => {
  gulp.src("fonts/**").pipe(gulp.dest("dist/fonts")).pipe(connect.reload());
  done();
});
gulp.task("sass", (done) => {
  gulp
    .src("sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compressed" }))
    // .pipe(sass())
    .pipe(sourcemaps.write("../maps"))
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
  done();
});
gulp.task("watch", (done) => {
  gulp.watch("html/*.html", gulp.series("html"));
  gulp.watch("js/*.js", gulp.series("js"));
  gulp.watch("sass/*.scss", gulp.series("sass"));
  done();
});
gulp.task(
  "default",
  gulp.series("watch", "html", "js", "sass", "img", "server", "fonts", "libs")
);
